import React, { useEffect, useState } from 'react';
import {
    Button,
    Cascader,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Radio,
    Select,
    Switch,
    TreeSelect,
    Tag
} from 'antd';

interface propsTS {
    title: string,
    itemObj: Object,
    onCancel: () => void,
    onOk: () => void,
}

const Admin = (props: propsTS) => {

    const [form] = Form.useForm();
    const onFinish = (values: any) => {
        console.log(values);
        let tags = []
        if (values.tags == 1) {
            tags = ['后端工程师', 'V6.Dooring', 'Dooring']
        }else{
            tags = ['全栈工程师', '橙子表单']
        }
        if (props.title == '添加') {
            let obj = {
                key:new Date().getTime(),
                ...values,
                tags
            }
            props.onCancel(obj)
        }else{
            let obj={
                ...props.itemObj,
                ...values,
                tags
            }
            props.onOk(obj)
        }
    };

    useEffect(() => {
        if (props.title == '编辑') {
            form.setFieldsValue(props.itemObj)
        }
    }, [])

    return (
        <Form
            form={form}
            onFinish={onFinish}
            style={{ maxWidth: 600 }}
        >
            <Form.Item label="用户名" name='name' >
                <Input />
            </Form.Item>
            <Form.Item label="角色" name='role' >
                <Select>
                    <Select.Option value="1">1</Select.Option>
                    <Select.Option value="2">2</Select.Option>
                </Select>
            </Form.Item>
            <Form.Item label="简介" name='desc' >
                <Input />
            </Form.Item>
            <Form.Item label="标签" name='tags' >
                <Select
                    defaultValue="lucy"
                    style={{ width: 120 }}
                    options={[
                        { value: 1, label: 'Jack' },
                        { value: 2, label: 'Lucy' },
                    ]}
                />
            </Form.Item>
            <Form.Item >
                <Button
                    type="primary" htmlType="submit"
                >确定</Button>
            </Form.Item>
        </Form>
    );
};

export default Admin;